<template>
  <div class="app-container">
    <!-- 搜索条件 end -->
    <el-table
      v-loading="listLoading"
      :data="pageInfo.records"
      element-loading-text="加载中......"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标题">
        <template slot-scope="scope">
          <span
            v-html="scope.row.title"
            class="m-title"
            @click="toImageDetail(scope.row.id)"
          ></span>
        </template>
      </el-table-column>
      <el-table-column label="描述" width="300">
        <template slot-scope="scope">
          <span v-html="scope.row.description"></span>
        </template>
      </el-table-column>
      <el-table-column label="审核信息" prop="remark" width="200" />
      <el-table-column label="标签">
        <template slot-scope="scope">
          {{ scope.row.label.join() }}
        </template>
      </el-table-column>
      <el-table-column label="预览">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            fit="cover"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope"
          ><i class="el-icon-time" /> {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-circle-check"
            @click="handlePass(scope.row.id)"
            >通过
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-circle-close"
            @click="handleNotPass(scope.row.id)"
            >不通过</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :hide-on-single-page="true"
      :current-page="pageInfo.current"
      :page-size="pageInfo.size"
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.total"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="备注"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-input v-model="remark" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubReviewInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getImageList, updateImageById } from "@/api/image";

export default {
  data() {
    return {
      pageInfo: { size: 10, current: 1, total: 0, records: [] },
      listLoading: true,
      dialogVisible: false,
      remark: "",
      curImageId: null,
    };
  },
  mounted() {
    this.fetchImages();
  },
  methods: {
    fetchImages() {
      this.listLoading = true;
      const params = {
        page: this.pageInfo.current,
        limit: this.pageInfo.size,
        status: 1,
      };
      getImageList(params).then((res) => {
        this.pageInfo = res.data;
        this.listLoading = false;
      });
    },
    handleCurrentChange(page) {
      this.pageInfo.current = page;
      this.fetchImages();
    },
    handlePass(imageId) {
      updateImageById({ status: 0, id: imageId }).then((res) => {
        this.$notify.success({
          title: "提示",
          message: "操作成功",
        });
        this.fetchImages();
      });
    },
    handleNotPass(imageId) {
      this.dialogVisible = true;
      this.curImageId = imageId;
      for (let item of this.pageInfo.records) {
        if (item.id === imageId) {
          this.remark = item.remark;
        }
      }
    },
    handleSubReviewInfo() {
      updateImageById({
        status: 2,
        id: this.curImageId,
        remark: this.remark,
      }).then((res) => {
        this.$notify.success({
          title: "提示",
          message: "操作成功",
        });
        this.dialogVisible = false;
        this.fetchImages();
      });
    },
    handleUpdImage(imageId) {
      this.$router.push({
        path: "/image/mod_image",
        query: { imageId: imageId },
      });
    },
    toImageDetail(imageId) {
      this.$router.push({
        path: "/image/image_detail",
        query: {
          id: imageId,
        },
      });
    },
  },
};
</script>

<style scoped>
.add-btn {
  margin-bottom: 10px;
}
.el-link {
  font-size: 12px;
  margin-left: 4px;
}
.el-link:hover {
  font-weight: bold;
}
.inline-input {
  width: 400px;
}
.m-title {
  cursor: pointer;
}
.m-title:hover {
  color: #409eff;
}
.el-col {
  margin-bottom: 10px;
}
</style>

